<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单的基本使用</title>
</head>
<body>

<!--
    form 表单   实现也页面和用户的数据交互
    登录页   注册页   编辑页  添加页
    form 标签
       嵌套表单控件
       input   type
            text:  普通文本框
            password: 密码框  数据有遮盖
            required  : 设置该组件是必填项
            readonly  : 设置该组件是只读的  不能修改

    action:  声明表单中的数据提交的后台接口
    method:  声明请求方式
       get     ?      /user/login?username=admin&password=123456       通过路径直接携带参数    安全性低  携带数据的大小有限制  4kb
       post    payload  实现数据的携带  安全性相对较高  数据大小没有限制      文件上传   post请求

       /user/add
       /user/delete
       /user/update
       /user/select

      restful  根据不同的请求方式 实现不同的操作
      /user     get    查询
      /user     post   添加
      /user     put    修改
      /user     delete  删除

      /user          option  预检请求    前后端分离    跨域

行内元素  input   元素默认水平排列  直到数据无法摆放折行
-->

<h3>欢迎注册</h3>
<form action="/user/login" method="get">
    <p>
        <label for="username">用户名</label>
        <input type="text" id="username"  name="username" placeholder="请输入用户名" value="" required  >
    </p>
    <p>
        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" value="" required></p>
    <!--
            单选的默认选中
              checked
    -->
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="男" > 男
        <input type="radio" name="sex" value="女" checked> 女
    </p>
<!--
   下拉选默认选中  selected
-->
    <p>
        <span>部门</span>
        <select name="dept">
            <option value="">请选择</option>
            <option value="teach" >教学部</option>
            <option value="quality" selected>教质部</option>
            <option value="market">市场部</option>
        </select>
    </p>
<!--
 文本域
-->
    <p>
        <span>个人简介</span>
        <textarea name="info" rows="20" cols="30"></textarea>
    </p>

    <p>
        <span>出生日期</span>
        <input type="date" name="birth">
        <input type="datetime-local" name="birth">
    </p>
    <p>
        <span>兴趣爱好</span>
        <input type="checkbox" name="hobby" value="music"> 音乐
        <input type="checkbox" name="hobby" value="running"> 跑步
        <input type="checkbox" name="hobby" value="basketball"> 篮球
        <input type="checkbox" name="hobby" value="code"> 编程
    </p>
    <p>
        <span>邮箱</span>
        <input type="email" name="email" >
    </p>
    <p>
        <span>手机号</span>
        <input type="tel" name="tel" >
    </p>
<!--    提交按钮
   单击提交按钮时  会一次性的将表单中填写的值 项action指定的后台接口进行提交
-->
    <p>
        <input type="submit" value="提交">
    </p>
</form>

</body>
</html>